﻿<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>商品分类维护</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css" />
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__JS__/supplies/treegrid/jquery.treegrid.css">
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__CSS__/supplies/common.css" />
</head>
<style>
    body {
        height: calc(100% - 90px);
        overflow: hidden;
        background: white;
    }

    .type {
        margin: -2px auto;
        height: calc(100%);
        border: 1px solid #ddd;
    }

    #info_table tr td {
        vertical-align: inherit;
        !important;
    }

    .form-title {
        height: 50px;
        text-align: right;
    }

    .checkHead table .form-value input {
        height: 34px;
    }

    img {
        width: 75px;
        height: 75px;
        max-width: 75px;
        _width: expression(this.width > 75 ? "37.5px" : this.width);
    }

    .delete_a {
        cursor: pointer;
    }

    .file {
        position: relative;
        display: inline-block;
        background: white;
        border: 1px solid #999;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #333;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
        top: 7px;
    }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

        .file:hover {
            background: white;
            border-color: #438eb9;
            color: #666;
            text-decoration: none;
        }

    .save_btn {
        background: #438eb9;
        border: 1px solid #438eb9;
        color: #fff;
    }

        .save_btn:hover {
            background: #438eb9;
            border: 1px solid #438eb9;
            color: #fff;
        }

        .save_btn:focus {
            color: #fff;
        }

    .form-horizontal .form-value input {
        border-radius: 0;
    }
</style>
<body>
    <!--编辑分类-->
    <div id="content">
        <!--编辑分类-->
        <div class="modal fade" id="orderType" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h3 class="modal-title" id="myModalLabel" v-if="upType == 1">
                            请编辑类型
                        </h3>
                        <h3 class="modal-title" id="myModalLabel" v-if="upType == 2">
                            请编辑品牌
                        </h3>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <table>
                                <tr>
                                    <td class="form-title">
                                        类型logo：
                                    </td>
                                    <td class="form-value">
                                        <img class="editImg" v-bind:src="json_data.image">
                                        <a href="javascript:;" class="file">
                                            选择文件
                                            <form enctype="multipart/form-data">
                                                <input type="file" @change="saveImg" name="image" style="">
                                            </form>
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-title">
                                        类型名称：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="json_data.name" type="text" class="search form-control" placeholder="请输入类型名称" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-title">
                                        类型英文名称：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="json_data.name_english" type="text" class="search form-control"
                                               placeholder="请输入类型英文名称" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-title">
                                        上级分类选择：
                                    </td>
                                    <td class="form-value">
                                        <input readonly="readonly" v-model="json_data.parent_name" type="text" class="save_tree_type search edit_type form-control" placeholder="请选择父级类别" />
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button v-if="upType == 1" type="button" class="btn btn-default" v-on:click="saveTypeInfo(1)">保存</button>
                        <button v-if="upType == 2" type="button" class="btn btn-default" v-on:click="saveTypeInfo(2)">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <!--新增分类-->
        <div class="modal fade" id="saveType" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h3 class="modal-title" id="saveModalLabel" v-if="type == 1">
                            新增商品分类
                        </h3>
                        <h3 class="modal-title" id="saveModalLabel" v-if="type == 2">
                            新增商品品牌
                        </h3>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <table>
                                <tr>
                                    <td class="form-title">
                                        logo：
                                    </td>
                                    <td class="form-value">
                                        <img class="addImg" src="" style="display: none;">
                                        <a href="javascript:;" class="file">
                                            <i class="icon-folder-open align-top bigger-125"></i>&nbsp;选择文件
                                            <form id="user" enctype="multipart/form-data">
                                                <input type="file" id="file" @change="uploadImg" name="image" style="">
                                            </form>
                                        </a>
                                    </td>
                                </tr>
                                <tr v-if="type == 1">
                                    <td class="form-title">
                                        名称：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.name" type="text" class="search form-control" placeholder="请输入类型名称" />
                                    </td>
                                </tr>
                                <tr v-if="type == 1">
                                    <td class="form-title">
                                        英文名称：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.name_english" type="text" class="search form-control"
                                               placeholder="请输入类型英文名称" />
                                    </td>
                                </tr>
                                <tr v-if='type == 2'>
                                    <td class="form-title">
                                        品牌名称：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.name" type="text" class="search form-control"
                                               placeholder="请输入品牌名称" />
                                    </td>
                                </tr>
                                <tr v-if='type == 2'>
                                    <td class="form-title">
                                        品牌英文名称：
                                    </td>
                                    <td class="form-value">
                                        <input v-model="formData.name_english" type="text" class="search form-control"
                                               placeholder="请输入品牌英文名称" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-title">
                                        上级类别选择：
                                    </td>
                                    <td class="form-value">
                                        <input type="hidden" class="parent_type_id" />
                                        <input readonly="readonly" type="text" class="save_tree_type search edit_type form-control"
                                               placeholder="请选择父级类别" />
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button v-if="type == 1" type="button" class="btn btn-default" v-on:click="addType(1)">保存</button>
                        <button v-if="type == 2" type="button" class="btn btn-default" v-on:click="addType(2)">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <div class="modal fade" id="saveTreeType" tabindex="-1" role="dialog" aria-labelledby="saveTreeModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 600px;height: 500px;">
                    <div class="modal-header" style="width: 100%;height: 50px;">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h3 class="modal-title" id="saveTreeModalLabel">
                            请选择父级分类
                        </h3>
                    </div>
                    <div class="modal-body" style="width: 100%;height: 385px;overflow: auto;">
                        <div class="zTreeDemoBackground left" id="div_tree" style="">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>
                    <div class="modal-footer" style="width: 100%;height: 65px;">
                        <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="saveParentType">
                            保存
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <!--搜索-->
        <div class="checkHead form-inline" style="margin-top:10px;padding-bottom: 5px;">
            <button class="btn form-group save_btn" v-on:click="saveModel(1)">
                <i class="icon-plus align-top bigger-125"></i>
                新增分类
            </button>
            <button class="btn form-group save_btn" v-on:click="saveModel(2)">
                <i class="icon-plus align-top bigger-125"></i>
                新增品牌
            </button>
        </div>
    </div>
    <div class="type" style="background:white;overflow: auto">
        <table class="table" id="info_table"></table>
    </div>
</body>
<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/treegrid/jquery.treegrid.min.js"></script>
<script rel="script" src="__JS__/supplies/treegrid/jquery.treegrid.bootstrap3.js?v=1.5"></script>
<script rel="script" src="__JS__/supplies/treegrid/jquery.treegrid.bootstrap.table.view.js?v=1.5"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/supplies/vue-validator.min.js"></script>
<script rel="script" src="__JS__/supplies/ztree/jquery.ztree.all.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/vue-resource.js"></script>
<script rel="script" src="__JS__/supplies/layer/layer.js"></script>
<script>

    var setting = {
        view: {
            selectedMulti: false
        },
        async: {
            enable: true,
            url: "{:url('admin/Product/getProductTypeInfo3')}",
            autoParam: ["name", "nameEn"],
            otherParam: { "otherParam": "zTreeAsyncTest" },
            dataFilter: filter
        },
        callback: {
            beforeClick: beforeClick,
            beforeAsync: beforeAsync,
            onAsyncError: onAsyncError,
            onAsyncSuccess: onAsyncSuccess
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            if (childNodes[i].name == null || childNodes[i].name == 'null') {
                childNodes[i].name = childNodes[i].name_english;
            }
        }
        return childNodes;
    }

    function beforeClick(treeId, treeNode) {
        if (!treeNode.isParent) {
            {
            }
        } else {
            return true;
        }
    }

    var log, className = "dark";

    function beforeAsync(treeId, treeNode) {

        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
        return true;
    }

    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        showLog("[ " + getTime() + " onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }

    function onAsyncSuccess(event, treeId, treeNode, msg) {
        showLog("[ " + getTime() + " onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }

    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }

    function getTime() {
        var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    function refreshNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            type = e.data.type,
            silent = e.data.silent,
            nodes = zTree.getSelectedNodes();
        if (nodes.length == 0) {
            alert("请先选择一个父节点");
        }
        for (var i = 0, l = nodes.length; i < l; i++) {
            zTree.reAsyncChildNodes(nodes[i], type, silent);
            if (!silent) zTree.selectNode(nodes[i]);
        }
    }

    $(function () {
        getGrid();
        $(".save_tree_type").on("click", function () {
            $('#saveTreeType').modal({
                keyboard: true
            });
        });
        $.fn.zTree.init($("#treeDemo"), setting);
    });

    function getGrid() {
        $('#info_table').bootstrapTable({
            url: '{:url("admin/Product/getProductTypeLine")}',
            toolbar: '#toolbar',
            sidePagination: 'client',
            pagination: false,
            treeView: true,
            treeId: "id",
            treeField: "id",
            treeRootLevel: 1,
            clickToSelect: true,
            columns: [
                {
                    title: '编号',
                    width: 160,
                    field: 'id'
                },
                {
                    title: '分类数量',
                    field: 'number',
                    align: 'center',
                    width: 50
                },
                {
                    title: '类型logo',
                    field: 'image',
                    align: 'center',
                    formatter: function (val, row, index) {
                        if (row.image == '' || row.image == null || row.image == undefined) {
                            return "<img src='" + oss_url + 'shop/default.png' + "'>"
                        } else {
                            return "<img src='" + oss_url + row.image + "'>"
                        }
                    }
                },
                {
                    title: '类型中文名称',
                    field: 'name',
                    align: 'center'
                },
                {
                    title: '类型英文名称',
                    field: 'name_english',
                    align: 'center'

                },
                {
                    title: '商品数量',
                    field: 'goods_number',
                    align: 'center'
                },
                {
                    title: '详情',
                    align: 'center',
                    formatter: function (val, row, index) {
                        var html = "<a data-toggle='modal' onclick='vm.editType(" + row.id + ")'>详情</a>&nbsp;&nbsp;" +
                            "<a data-toggle='modal' onclick='vm.deleteType(" + row.id + ',' + row.level + ")'>删除</a>";
                        return html;
                    }
                }
            ]
        });
    }

    var vm = new Vue({
        el: "#content",
        data: {
            parent_id: 0,
            formData: {},
            id: '',
            json_data: {},
            images: [],
            src: oss_url,
            level: '',
            type: '',
            upType: ''
        },
        methods: {
            btn_search: function () {
                $('#info_table').treegridData("refresh");
            },
            saveModel: function (index) {
                $('#saveType').modal({
                    keyboard: true
                });
                this.type = index;
            },
            addType: function (index) {
                if (index == 1) {    //新增分类
                    if (this.level == 2) {
                        layer.msg('请选择正确的分类');
                        return false;
                    }
                    if (!this.formData.name) {
                        layer.msg('请输入中文名');
                        return false;
                    }
                    var data = {
                        name: this.formData.name,
                        name_english: this.formData.name_english,
                        parent_id: this.parent_id,
                        level: this.level,
                        image: this.formData.image,
                        type: 1
                    };
                }
                if (index == 2) {    //新增品牌
                    if (this.level != 2) {
                        layer.msg('请选择正确的分类');
                        return false;
                    }
                    var data = {
                        name: this.formData.name,
                        name_english: this.formData.name_english,
                        parent_id: this.parent_id,
                        level: this.level,
                        image: this.formData.image,
                        type: 2
                    };
                }
                if (!this.formData.name_english) {
                    layer.msg('请输入英文名');
                    return false;
                }
                //                if (!this.formData.image){
                //                    layer.msg('请上传图片');
                //                    return false;
                //                }
                var url = '{:url("admin/Product/addProductType")}';
                this.$http.post(url, data).then(function (res) {
                    if (res.body.status == 200) {
                        layer.msg(res.body.msg, {
                            time: 2000 //20s后自动关闭
                        }, function () {
                            location.reload();
                        });
                    } else {
                        layer.msg(res.body.msg);
                    }
                    /*layer.msg(res.body.msg, {
                        time: 20000, //20s后自动关闭
                        btn: ['关闭']
                    }, function () {
                        location.reload();
                    });*/
                })
            },
            editType: function (id) {
                var url = "{:url('admin/Product/getProdctTypeInfoById')}";
                this.$http.post(url, {
                    id: id,
                }).then(function (data) {
                    this.json_data = data.body.data;
                    if (data.body.data.image == '' || data.body.data.image == null || data.body.data.image == undefined || data.body.data.image == 'null') {
                        this.json_data.image = 'shop/default.png';
                    }
                    this.json_data.image = oss_url + this.json_data.image;
                    this.parent_id = data.body.data.parent_id;
                    this.level = data.body.data.level - 1;
                    this.upType = data.body.data.type_menu;
                });
                $('#orderType').modal({
                    keyboard: true
                });
                this.id = id;
            },
            deleteType: function (id, level) {
                layer.config({
                    skin: "my_skin"
                });
                layer.confirm('您确定删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var url = "{:url('admin/Product/saveProTypeStatus')}";
                    var data = {
                        id: id,
                        level: level,
                    };
                    vm.$http.post(url, data).then(function (data) {
                        layer.msg(data.body.msg, {
                            time: 2000 //20s后自动关闭
                        }, function () {
                            location.reload();
                        });
                    });
                });

            },
            uploadImg: function (e) {
                var fData = new FormData();
                fData.append('image', e.target.files[0]);
                $.ajax({
                    url: "{:url('admin/Sundry/uploadImg')}",
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    data: fData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        vm.formData.image = res.data.image;
                        $(".addImg").attr("src", oss_url + res.data.image);
                        $(".addImg").css("display", "block");
                    }
                });
            },
            saveParentType: function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodes = zTree.getSelectedNodes();
                if (nodes[0]) {
                    $(".save_tree_type").val(nodes[0].name);
                    $(".parent_type_id").val(nodes[0].id);
                    this.parent_id = nodes[0].id;
                    this.level = nodes[0].level;
                }
            },
            saveImg: function (e) {
                var fData = new FormData();
                fData.append('image', e.target.files[0]);
                fData.append('id', this.id);
                $.ajax({
                    url: "{:url('admin/Sundry/uploadImg')}",
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    data: fData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.data.image == '') {
                            vm.json_data.image = oss_url + 'shop/default.png'
                        } else {
                            vm.json_data.image = oss_url + res.data.image;
                        }

                        //                        $(".editImg").attr("src",oss_url + res.data.image);
                    }
                });
            },
            saveTypeInfo: function (index) {
                var url = '{:url("admin/Product/saveTypeInfo")}';
                if (index == 1) {    //修改分类

                    //if (this.level > 1 || this.level < 0){
                    //    layer.msg('请选择正确的分类');
                    //    return false;
                    //}
                    if (!this.json_data.name) {
                        layer.msg('请输入中文名');
                        return false;
                    }

                    var data = {
                        id: this.id,
                        name: this.json_data.name,
                        name_english: this.json_data.name_english,
                        parent_id: this.parent_id,
                        image: this.json_data.image.replace(oss_url, ""),
                        level: this.level,
                        type: 1
                    };
                }
                if (index == 2) {    //修改品牌
                    if (this.level != 2 || !this.level) {
                        layer.msg('请选择正确的分类');
                        return false;
                    }
                    var data = {
                        id: this.id,
                        name: this.json_data.name_english,
                        name_english: this.json_data.name_english,
                        parent_id: this.parent_id,
                        image: this.json_data.image,
                        level: this.level,
                        type: 2
                    };
                }
                if (!this.json_data.name_english) {
                    layer.msg('请输入英文名');
                    return false;
                }
                //                if (!this.json_data.image){
                //                    layer.msg('请上传图片');
                //                    return false;
                //                }
                this.$http.post(url, data).then(function (res) {
                    if (res.data.status == 200) {
                        if (res.body.status == 200) {
                            layer.msg(res.body.msg, {
                                //    time: 2000 //20s后自动关闭
                                //}, function () {
                                //    location.reload();
                            });
                            $("#info_table").bootstrapTable("refresh", {
                                url: '{:url("admin/Product/getProductTypeLine")}'
                            });
                        } else {
                            layer.msg(res.body.msg);
                        }
                        this.level = '';
                    } else {
                        layer.msg(res.body.msg);
                    }
                })
            }
        }
    })
</script>
</html>